<template>
	<view class="contenter">
		<view class="contenter_header">
			
		</view>
		<view class="contenter_semicircle">
			
		</view>
		<view class="contenter_center">
			<view class="contenter_bills">
				<view class="flex justify-between header_title" >
					<view class="bill_type">
						{{billsInfo.billsType}}
					</view>
					<view class="bill_times">
						2022-10-12
					</view>
				</view>
				<view class="monery_count">
					￥：100.12元
				</view>
			</view>
			
			<view class="bills_xq">
				<view class="content" v-for="(item,index) in billsInfos" :key="index">
					<view class="content_main bg-white margin-bottom margin-right-xs radius margin-left-xs padding" v-if="item.billsType == 0">
						<view class="block__title">{{item.billsTittle}}</view>
						<view class="flex margin-top-xs justify-between">
							<view class="text-gray">缴费人姓名</view>
							<view class="text-gray">{{item.householderName}}</view>
						</view>
						<view class="flex margin-top-xs justify-between">
							<view class="text-gray">房屋位置</view>
							<view class="text-gray">{{item.houseNum}}</view>
						</view>
						<view class="flex margin-top-xs justify-between">
							<view class="text-gray">房屋面积</view>
							<view class="text-gray">{{item.houseArea}}</view>
						</view>
						
<!-- 						<view class="flex margin-top-xs justify-between">
							<view class="text-gray">租户类型</view>
							<view class="text-gray">{{item.tenantType}}</view>
						</view> -->
					</view>
					
					<view class="content_main  bg-white margin-bottom margin-right-xs radius margin-left-xs padding" v-if="item.billsType == 1 && billsInfo.applyState == 0">
						<view class="block__title">{{item.billsTittle}}</view>
						<view class="flex margin-top justify-between">
							<view class="text-gray">支付人</view>
							<view class="text-gray">{{item.householderName}}</view>
						</view>
<!-- 						<view class="flex margin-top-xs justify-between">
							<view class="text-gray">租户类型</view>
							<view class="text-gray">{{item.tenantType}}</view>
						</view> -->
						<view class="flex margin-top-xs justify-between">
							<view class="text-gray">房屋位置</view>
							<view class="text-gray">{{item.houseNum}}</view>
						</view>
						<view class="flex margin-top-xs justify-between">
							<view class="text-gray">房屋面积</view>
							<view class="text-gray">{{item.houseArea}}</view>
						</view>
						<view class="flex margin-top-xs justify-between">
							<view class="text-gray">支付单号</view>
							<view class="text-gray">{{item.applyOrder}}</view>
						</view>
						<view class="flex margin-top-xs justify-between">
							<view class="text-gray">支付方式</view>
							<view class="text-gray">{{item.applyType}}</view>
						</view>
						<view class="flex margin-top-xs justify-between">
							<view class="text-gray">支付时间</view>
							<view class="text-gray">{{item.applyTime}}</view>
						</view>
						<view class="flex margin-top-xs justify-between">
							<view class="text-gray">实缴金额</view>
							<view class="text-gray">{{item.realityMoney}}</view>
						</view>
					</view>
					
					<view class="applyBtn" v-if="item.billsType == 1 && billsInfo.applyState == 1">
						<button type="primary">立即支付</button>
					</view>
				</view>
				
				
			</view>
			
		</view>
	</view>
</template>

<script>
	import context from '../../lib/java110/Java110Context.js';
	export default {
		data() {
			return {
				billsInfo: "",
				billsInfos:""
			}
		},
		onLoad: function(options) {
			context.onLoad(options);
			console.log("144",options.bills.billState)
			this.billsInfo = JSON.parse(options.bills);
			this.billsInfos = this.billsInfo.billsInfoData
			console.log("数据", this.billsInfos)
		},
		methods: {
			
		}

	}
</script>

<style lang="scss" scoped>
	.contenter{
		width: 100%;
		height: calc(100vh - 10rpx);
		overflow-y: auto;
		background-color: white;
		position: relative;
		.contenter_header{
			width: 100%;
			height: 260rpx;
			background-color: deepskyblue;
		}
		.contenter_semicircle{
			width: 100%;
			height: 140rpx;
			background-color: deepskyblue;
			border-radius: 50%;
			position: absolute;
			top: 197rpx;
		}
		.contenter_center{
			margin: 0rpx 20rpx;
			// height: 400rpx;
			position: relative;
			top: -98rpx;
			// background-color: white;
			.contenter_bills{
				width: 100%;
				height: 220rpx;
				background-color: whitesmoke !important;;
				border-radius: 20rpx;
				.header_title{
					width: 100%;
					height: 100rpx;
					border-radius: 20rpx;
					line-height: 100rpx;
					.bill_type{
						font-size: 30rpx;
						font-weight: 500;
						padding: 20rpx;
					}
					.bill_times{
						font-size: 20rpx;
						font-weight: 500;
						padding: 20rpx;
					}
				}
				.monery_count{
					width: 100%;
					height: 110rpx;
					line-height: 110rpx;
					font-size: 30rpx;
					text-align: center;
				}
			}
			.bills_xq{
				width: 100%;
				height: 100%;
				
				.content{
					// background-color: whitesmoke;
					// margin: 20rpx 0rpx;
					// border-radius: 20rpx;
					.content_main{
						margin: 20rpx 0rpx;
						border-radius: 20rpx;
						background-color: whitesmoke;
					}
					.applyBtn{
						position: fixed;
						bottom: 16rpx;
						display: flex;
						justify-content: center;
						width: 100%;
						// background-color: white;
						button{
							width: 400rpx;
							height: 80rpx;
							line-height: 80rpx;
							text-align: center;
							border-radius: 40rpx;
						}
					}
				}
			}
		}
		
	}
</style>
